<template>
  <div class="data-box">
    <div class="data-before">
      <div class="data-title">当前页面</div>
      <div class="data-title">所有查询结果</div>
    </div>
    <div class="data-item">
      <div class="data-title">销售额</div>
      <div class="data-value">{{ data.salesRevenue || 0 }}元</div>
      <div class="data-value">{{ allData.salesRevenue || 0 }}元</div>
    </div>
    <div class="data-item">
      <div class="data-title">接待量</div>
      <div class="data-value">{{ data.receptionVolume || 0 }}人</div>
      <div class="data-value">{{ allData.receptionVolume || 0 }}人</div>
    </div>
    <div class="data-item">
      <div class="data-title">转化率</div>
      <div class="data-value">{{ data.conversionRate || 0 }}%</div>
      <div class="data-value">{{ allData.conversionRate || 0 }}%</div>
    </div>
    <div class="data-item">
      <div class="data-title">响应时间</div>
      <div class="data-value">{{ data.responseTime || 0 }}秒</div>
      <div class="data-value">{{ allData.responseTime || 0 }}秒</div>
    </div>
    <div class="data-item">
      <div class="data-title">问答比</div>
      <div class="data-value">{{ data.qARatio || 0 }}%</div>
      <div class="data-value">{{ allData.qARatio || 0 }}%</div>
    </div>
    <div class="data-item">
      <div class="data-title">回复率</div>
      <div class="data-value">{{ data.responseRate || 0 }}%</div>
      <div class="data-value">{{ allData.responseRate || 0 }}%</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
const props = withDefaults(defineProps<{ data: any }>(), {
  data: () => ({})
})

const data = computed(() => {
  return props.data.currentPage || {}
})

const allData = computed(() => {
  return props.data.allData || {}
})
</script>

<style scoped lang="scss">
.data {
  &-box {
    margin-top: 10px;
    height: 70px;
    box-sizing: border-box;
    border: 1px solid #E6EBF1;
    display: flex;
    align-items: center
  }
  &-item {
    box-sizing: border-box;
    padding: 0 27px;
    border-right: 1px solid #E6EBF1;
  }
  &-title {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 12px;
    color: #757575;
  }

  &-value {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 12px;
    color: #333333;
    margin-top: 5px;
  }

  &-before {
    box-sizing: border-box;
    padding: 10px;
    margin-top: 20px;
  }
}
</style>
